<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <script src="../static/easyui/datagrid-detailview.js"></script>-->
</head>
<body>

<!-----------------弹出框----------------------------->
<div id="spu_dlg" class="easyui-dialog" title="编辑spu" style="width:700px;height:520px;"
     closed="true"  data-options="iconCls:'icon-save',resizable:true,modal:false" buttons="#spuBtns" >
    <form id="spuForm">
        <br/>
        <label>spu名称:</label>
        <!--以下所有属性必须跟SpuInfo-->
        <input  id="spuName" name="spuName" class="easyui-textbox" data-options="" style="width:300px;"/>
        <br/><br/>
        <label>spu描述:</label>
        <input  id="description" name="description" class="easyui-textbox" data-options="multiline:true" style="width:500px;height:100px"/>
        <!--spuId == 实际对应的是spuInfo.id-->
        <input id="spuId" name="spuId" type="hidden"/>
        <br/><br/>
        <!--<input value="aaa">-->
        <!--<input th:value="${name}" >-->
        <!----------------商品图片列表 ----------------------->

        <table id="spuImgDg" class="easyui-datagrid" title="商品图片列表"
               data-options="singleSelect:true,method:'get',toolbar:'#spuImgTootbar'" ></table>

        <!----------------图片列表工具栏----------------------->
        <div id="spuImgTootbar" style="padding:5px;height:auto"  >
            <div style="margin-bottom:5px">
                <a href="#" id="spuImgAdd" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加图片</a>
                <a href="#" id="spuImgUploadBtn" class="easyui-linkbutton" iconCls="icon-save" plain="true" >图片上传</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
            </div>
        </div>

        <br/><br/>
        <!----------------销售属性列表---------------------------->
        <table id="spuSaleAttrDg" class="easyui-datagrid" title="销售属性列表"
               data-options="singleSelect:true,method:'get',toolbar:'#spuSaleAttrTootbar'" ></table>

        <!----------------销售属性列表工具栏----------------------->
        <div id="spuSaleAttrTootbar" style="padding:5px;height:auto"  >
            <div style="margin-bottom:5px">
                <a href="#" id="spuSaleAttrAddBtn" class="easyui-linkbutton" iconCls="icon-add" onclick="addSpuSaleAttr()" plain="true">添加销售属性</a>
                <a href="#" id="spuSaleAttrEditBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editSpuSaleAttr()">编辑销售属性</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" >删除</a>
            </div>
        </div>
        <!--引入销售属性页面 ctrl+/-->
        <div th:include="spuSaleAttrPage"></div>
    </form>
</div>
<!----------------弹出框的按钮组----------------------->
<div id="spuBtns">
    <a href="#" class="easyui-linkbutton" onclick="saveSpu()">保 存</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#spu_dlg').dialog('close')">关 闭</a>
</div>
<script type="text/javascript">
    // 初始化
    function addSpuInfo() {
        // 调用初始化initSpuInfoDlg()方法
        initSpuInfoDlg();
    }
    // 初始化添加dialog 编辑：肯定需要一个参数：id，name，spuInfo对象！
    function initSpuInfoDlg(spuInfo) {
        // 打开模态框
        $("#spu_dlg").dialog("open");
        //初始化表单
        initSpuForm(spuInfo);

        //初始化图片表格
        initSpuImgListDatagrid(spuInfo);

        //初始化上传控件
        initUploader();

        //初始化销售属性列表
        initSpuSaleAttrListDatagrid(spuInfo);
    }
    /*清空表单*/
    function initSpuForm(spuInfo){
        //清空文本框
        $("#spuForm").form("clear");

    }
    /*初始化图片表格*/
    function initSpuImgListDatagrid(spuInfo) {
        /*加载旧数据*/
        $('#spuImgDg').datagrid('loadData', {total: 0, rows: []});
        console.log("初始化表格");
        spuImgDg = $("#spuImgDg").datagrid({
            idField: 'fileId',    //标识行的主键  可以利用getRowIndex进行查询
            columns: [[
                {field: 'fileId', title: '文件编号', width: '15%'},//隐藏文件页面内部编号
                {
                    field: 'imgName', title: '图片简称', width: '20%',
                    editor: {
                        type: 'validatebox', options: {required: true}  //必填项
                    }
                },
                {field: 'imgUrl', title: '图片路径', hidden: true},  //隐藏真实路径
                {
                    /*上传进度条实际上就是一组动态变化的数据100*/
                    field: 'progress', title: '上传进度', width: '20%',
                    formatter: function (value, row, index) {
                        console.log("更新进度条！！" + value);
                        if (!value) {
                            value = 0;
                        }
                        /*拼接的一个html*/

                        var htmlstr =
                            "<div class='easyui-progressbar progressbar' style='width:100px;height:20px;' value='" + value + "' text='" + value + "'%>" +
                            "<div class='progressbar-text'  style='width: 100px; height: 20px; line-height: 20px;'>" + value + "%</div>" +
                            "<div class='progressbar-value' style='width:" + value + "%; height: 20px; line-height: 20px;'>" +
                            "<div class='progressbar-text' style='width: 100px; height: 20px; line-height: 20px;'>" + value + "%</div>" +
                            "</div>" +
                            "</div>";
                        return htmlstr;
                    }
                },
                {
                    /*根据图片.imgUrl*/
                    field: 'imgState', title: '上传状态', width: '20%',           //如果存在路径表示上传成功
                    formatter: function (value, row, index) {
                        console.log('row.imgUrl:' + row.imgUrl);
                        if (row.imgUrl != undefined && row.imgUrl != '') {
                            return '已上传';
                        } else {
                            return '等待上传';
                        }
                    }
                }
            ]],
            onDblClickRow: function (rowIndex, rowData) {
                //双击开启编辑行
                spuImgDg.datagrid("beginEdit", rowIndex);
                //设定当失去焦点时,退出编辑状态
                var imgName = rowData.imgName;
                $("input.datagrid-editable-input").val(imgName).bind("blur", function (evt) {
                    spuImgDg.datagrid('endEdit', rowIndex);
                });
            },
            /*datagrid-detailview.js 回显图片功能 ctrl+f5 : 强制刷新，情况浏览器缓存 ctrl+shift+delete*/
            view: detailview,
            detailFormatter: function (rowIndex, rowData) {
                /*添加一个判断*/
                if (rowData.imgUrl!=null){
                    return "<img src=" + rowData.imgUrl + " style='width:100px;height:100px;'>";
                }
            }
        });
    }
    /*上传图片工具控件 edit,webuploader,现成的工具-接口：只需要知道控制名称 */
    function initUploader(){
        /*文件上传：上传的控制器谁！*/
        console.log("初始化上传控件");

        var spuImgDg=  $("#spuImgDg");
        //初始化上传控件
        var spuImgUploader = WebUploader.create({
            auto:false,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收路径，上传的控制器
            server: '/fileUpload',
            // 选择文件的按钮。弹出选中图片的窗体，然后点击图片上传
            pick: '#spuImgAdd',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            //设定文件大小上限 2M
            fileSingleSizeLimit:2*1024*1024,
            //可接受的文件类型：接受的文件类型
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        console.log("初始化文件上传控件的响应--fileQueued");

        //当用户选择了文件以后，表格要进行增行
        spuImgUploader.on('fileQueued',function (file) {
            console.log("用户增加文件:"+file.id+'||'+file.name);
            var row={
                fileId:file.id,
                imgName:file.name
            }
            spuImgDg.datagrid('appendRow',row);
        });


        //上传过程中，该进度会反复触发
        spuImgUploader.on( 'uploadProgress', function( file, percentage ) {

            var rowIndex=spuImgDg.datagrid('getRowIndex',file.id);

            var progessRow={progress:(percentage*100).toFixed(2)};

            spuImgDg.datagrid('updateRow', {index:rowIndex,row:progessRow});
        });


        // 上传成功时，要把生成的图片路径返回给表格的行中的url
        console.log("初始化文件上传控件的响应--uploadSuccess");
        spuImgUploader.on( 'uploadSuccess', function( file ,response) {
            console.log("上传完成："+file.id+"||"+response._raw);
            var fileId=file.id;
            var rowIndex = spuImgDg.datagrid('getRowIndex',file.id);//通过file.id查询到行号
            spuImgDg.datagrid('updateRow',
                {   index:rowIndex,
                    row:{imgUrl:response._raw}
                });
        });

        $('#spuImgUploadBtn').click(function(){
            console.log("开始上传");
            if(spuImgUploader.getFiles().length<=0){
                $.messager.alert('警告','没有需要上传的文件','warning');
                return;
            }
            spuImgUploader.upload();
        });
    }

    /*初始化销售属性控件*/
    function initSpuSaleAttrListDatagrid(spuId){
        var spuSaleAttrDg =$('#spuSaleAttrDg').datagrid('loadData', { total: 0, rows: [] });
        spuSaleAttrDg.datagrid({
            idField: 'saleAttrId', // 主键
            columns:[[
                { field:'id',title:'id',hidden:true },
                { field:'saleAttrId',title:'销售属性Id',width:'25%'},
                { field:'saleAttrName',title:'销售属性名称',width:'25%'},
                { field:'spuSaleAttrValueJson',title:'销售属性值暂存', width:'50%'}
            ]]
        });
    }

    /*添加销售属性事件*/
    function addSpuSaleAttr(){
        initSpuSaleAttrDlg();
    }
    /*编辑销售属性*/
    function editSpuSaleAttr(){
        var spuId= $("#spuId").val();
        var spuSaleAttr = $('#spuSaleAttrDg').datagrid('getSelected');
        initSpuSaleAttrDlg(spuId,spuSaleAttr);
    }
    function saveSpu() {
        // 参数如何规划
        var spuInfo={};
        spuInfo["id"] = $("#spuId").val();
        spuInfo["spuName"] = $("#spuName").val();
        spuInfo["description"] = $("#description").val();
        spuInfo["catalog3Id"] = $("#ctg3ForSpuList").combobox('getValue');
        // 图片列表
        // 先获取整个图片表格的数据
        var spuImgDgRows = $("#spuImgDg").datagrid("getRows");
        // iter foreach itar array imgName ,imgUrl 是我们需要添加到数据库
        for (var i = 0; i < spuImgDgRows.length; i++) {
            var spuImg = spuImgDgRows[i];
//          SpuInfo.spuImageList.imgName= "金正.jpg"
            spuInfo["spuImageList["+i+"].imgName"]=spuImg.imgName;
            spuInfo["spuImageList[" + i + "].imgUrl"] = spuImg.imgUrl;
        }
        // 平台属性列表
//        先获取销售属性列表集合
        var spuSaleAttrDgRows = $("#spuSaleAttrDg").datagrid("getRows");
        for (var i = 0; i < spuSaleAttrDgRows.length; i++) {
            // 销售属性表
            spuInfo["spuSaleAttrList[" + i + "].id"] = spuSaleAttrDgRows[i].id;  //要跟bean中字段对齐
            // spuInfo["spuSaleAttrList[" + i + "].spuId"] spuId == 是从spuInfo.id 得到。
            /* 1 = 颜色 */
            spuInfo["spuSaleAttrList[" + i + "].saleAttrId"] = spuSaleAttrDgRows[i].saleAttrId;  //要跟bean中字段对齐 1
            spuInfo["spuSaleAttrList[" + i + "].saleAttrName"] = spuSaleAttrDgRows[i].saleAttrName; // 颜色
            // 销售属性值继续循环操作 变量 spuInfo.spuSaleAttrList.spuSaleAttrValueList
            // spuSaleAttrDgRows[i].spuSaleAttrValueList.length = spuSaleAttrValueJson easyUI --

            var saleAttrValueRows = spuSaleAttrDgRows[i].spuSaleAttrValueJson.rows;
            for (var j = 0; j < saleAttrValueRows.length; j++) {
                // 同理spuId 不需要赋值saleAttrId，saleAttrValueName。
                spuInfo["spuSaleAttrList[" + i + "].spuSaleAttrValueList[" + j + "].id"] = saleAttrValueRows[j].id;
                // saleAttrValueName   saleAttrValueName
                spuInfo["spuSaleAttrList[" + i + "].spuSaleAttrValueList[" + j + "].saleAttrValueName"] = saleAttrValueRows[j].saleAttrValueName;
                // saleAttrId=销售属性表中的saleAttrId.
                spuInfo["spuSaleAttrList[" + i + "].spuSaleAttrValueList[" + j + "].saleAttrId"] = spuSaleAttrDgRows[i].saleAttrId;
            }
        }

        // 测试数据格式是否正确！
        console.log(JSON.stringify(spuInfo));

        $.post("saveSpuInfo",spuInfo,function (data) {
            // 关闭窗口
            $("#spu_dlg").dialog("close");
            // 加载数据
            $("#spulist_dg").datagrid("reload");
        })
    }

</script>
</body>
</html>